<template>
	<view class="index">
		<van-search
		@click-input="goSearch"
		placeholder="请输入搜索关键词" 
		input-align="center"
		/>
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
		    <van-swipe-item v-for="(b,bi) in banners">
				<image :src="b.src" mode="aspectFill"></image>
			</van-swipe-item>
		</van-swipe>
		<van-notice-bar
		  left-icon="volume-o"
		  :text="notify.content"
		/>
	</view> 
	<view class="card">
		<van-grid :column-num="5">
		  <van-grid-item v-for="(c,ci) in cates" :key="'cate'+ci">
		    <van-image :src="c.url"></van-image>
			<view class="cate-name">
				{{c.name}}
			</view>
		  </van-grid-item>
		</van-grid>
	</view>
	<van-dropdown-menu>
	  <van-dropdown-item v-model="value1" @change="setGoods" :options="option1" />
	  <van-dropdown-item v-model="value2" @change="orderGoods" :options="option2" />
	</van-dropdown-menu>
	<tab-bar :index="0"></tab-bar>
	<!--商品-->
	<van-card
	  v-for="(g,gi) in goods" :key="'goods'+gi"
	  :price="g.price"
	  :origin-price="g.pre_price"
	  :desc="g.goods_desc"
	  :title="g.name"
	  :thumb="g.goods_thumb" @click="goDetail(g._id)"
	>
	  <template #tags>
	    <van-tag v-for="(gt,gti) in g.keywords.split(',')" plain type="danger">{{gt}}</van-tag>
	  </template>
	  <template #footer>
		    <view class="">
			    <van-tag>
				    库存:{{g.remain_count}}
			    </van-tag>
				<van-tag>
				    销量:{{g.month_sell_count}}/月
				</van-tag>
		    </view>
	  </template>
	</van-card>
	<!--底部导航栏-->
	<van-tabbar v-model="active" @change="onChange">
	  <van-tabbar-item icon="home-o">首页</van-tabbar-item>
	  <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
	  <van-tabbar-item icon="shopping-cart">购物车</van-tabbar-item>
	  <van-tabbar-item icon="friends">个人中心</van-tabbar-item>
	</van-tabbar>
</template>

<script>
	const Home = uniCloud.importObject('home')
	import { ref } from 'vue';
	export default {
		 setup() {
			const active = ref(0);
			const onChange = (index) =>{
				let router = ['index','cate','cart','user']
				uni.reLaunch({
					url:`/pages/${router[index]}/index`
				})
			};
		    const value1 = ref(0);
		    const value2 = ref('a');
		    const option1 = [
		      { text: '全部商品', value: 0 },
		      { text: '新款商品', value: 1 },
		      { text: '活动商品', value: 2 },
		    ];
		    const option2 = [
		      { text: '默认排序', value: 'a' },
		      { text: '好评排序', value: 'b' },
		      { text: '销量排序', value: 'c' },
		    ];
		
		    return {
		      value1,
		      value2,
		      option1,
		      option2,
			  active,
			  onChange
		    };
		  },
		data() {
			return {
				banners:[],
				cates:[],
				notify:"",
				goods:[]
			}
		},
		onLoad() {
			this.getSwiper()
			this.homeData()
			
			this.getGoods()
		},
		methods: {
			getSwiper(){
				uniCloud.callFunction({
					name:"swiper"
				}).then(res=>{
					this.banners = res.result.data;
				})
			},
			homeData(){
				//使用云对象的方式获取数据
				Home.categories().then(res=>{
					this.cates = res.data
				})
				Home.notify().then(res=>{
					this.notify = res.data[0]
				})
			},
			getGoods(where={}){
				Home.goods(where).then(res=>{
					this.goods = res.data
				})
			},
			setGoods(e){
				switch(e){ 
					case 0:
					this.getGoods({})
					break;
					case 1:
					this.getGoods({isNew:true})
					break;
					case 2:
					this.getGoods({isHot:true})
					break;
				}
			},
			orderGoods(e){
				//排序和筛选一块用
				switch(e){
					case "a":
					    this.getGoods({})
					    break;
					case "b":
					    this.getGoods({
						    goodComment:true,
					})
					break;
					case "c":
					    this.getGoods({
						    sales:true,
					})
					break;
				}
			},
			goSearch(){
				uni.navigateTo({
					url:"/pages/goods/search"
				})
			},
			goDetail(id){
				uni.navigateTo({
					url:'/pages/goods/detail?id='+id+'&name=商品'
				})
			}
		}
	}
</script>

<style>
	.my-swipe .van-swipe-item {
	    color: #fff;
	    height: 450rpx;
	    width: 100%;
	}
	.my-swipe .van-swipe-item image{
	    width: 100%;
	}
	.van-image{
		width: 88upx;
		height: 88upx;
	}
	.cate-name{
		min-width: 100upx;
		font-size: 20upx;
		text-align: center;
		padding: 10upx 0;
		color: #666;
	}
	.van-card .van-tag{
		margin-right: 10upx;
	}
</style>
